<!--
 * @Description: 
 * @Version: 1.0
 * @Author: Will
 * @Date: 2021-12-06 14:15:37
 * @LastEditors: MarsLay 331412466@qq.com
 * @LastEditTime: 2024-02-20 15:35:31
 * @FilePath: \cloud-space\pages\assets\discern.vue
 * Copyright (C) 2021 Will. All rights reserved.
-->
<template>
  <l-page title="我的行程">
    <tab @change="tabChange" :param="param" :screen="screen"></tab>
    <view class="list">
      <view class="add">
        <image class="add-icon" mode="aspectFill" src="../../static/img/icon/trip-add-icon.png"></image>
        <view class="content">
          <view class="title">创建行程</view>
          <view class="tip">创建自己心意的行程</view>
        </view>
        <image class="arrow" mode="aspectFill" src="../../static/img/icon/arrow-right-b.png"></image>
      </view>
      <view class="inner">
        <view class="middle-title">待发布</view>
        <view class="inner-list">
          <view class="single" v-for="v in list" :key="v.id">
            <view class="single-inner">
              <view class="title">{{ v.title }}</view>
              <view class="tip">{{ v.content }}</view>
              <view class="param">{{ v.days }}天 共{{ v.person }}人</view>
            </view>
            <image class="arrow" mode="aspectFill" src="../../static/img/icon/arrow-right-b.png"></image>
          </view>
        </view>
      </view>
    </view>
  </l-page>
</template>

<script>
import tab from "@/components/tab/tab";
export default {
  name: "setting",
  components: { tab },
  data() {
    return {
      param: {
        match: "type",
        list: [
          { id: 0, title: "行程" },
          { id: 1, title: "已发布" },
        ],
      },
      screen: {
        type: 0,
      },
      list: [{ id: 0, title: '冬日瑰丽：哈尔滨冰雪奇幻之旅', content: '冰雪童话，冬日乐园', days: 7, person: 50 },
      { id: 1, title: '冬日瑰丽：哈尔滨冰雪奇幻之旅', content: '冰雪童话，冬日乐园', days: 7, person: 50 }]
    };
  },
  computed: {},
  watch: {},
  onLoad(d) { },
  onShow() { },
  methods: {
    tabChange(v) {
      this.screen.type = v;
    }
  },
  onUnload() { },
};
</script>
<style lang="less" scoped>
/deep/ .tab {
  border-top: 2upx solid #F5F5F5;
}

.list {
  padding: 20upx;
  width: 100%;
  height: calc(100% - 86upx);

  .add {
    .flex();
    padding: 0 26upx 0 28upx;
    width: 100%;
    height: 138upx;
    background: #FFFFFF;
    border-radius: 16upx;

    .content {
      padding: 0 22upx;
      width: calc(100% - 56upx - 12upx);

      .title {
        font-size: 32upx;
        font-weight: bold;
        color: #333333;
        line-height: 40upx;
      }

      .tip {
        margin-top: 16upx;
        font-size: 24upx;
        color: #999999;
        line-height: 40upx;
      }
    }
  }

  .inner {
    .middle-title {
      padding: 40upx 10upx 10upx;
      font-size: 32upx;
      font-weight: bold;
      color: #333333;
      line-height: 40upx;
    }

    .single {
      .flex();
      padding: 20upx 26upx 20upx 20upx;
      min-height: 160upx;
      background: #FFFFFF;
      border-radius: 16upx;

      .single-inner {
        padding-right: 20upx;
        width: calc(100% - 12upx);
      }

      .title {
        font-size: 32upx;
        font-weight: bold;
        color: #333333;
        line-height: 36upx;
      }

      .tip {
        padding: 6upx 0;
        font-size: 24upx;
        color: #333333;
        line-height: 36upx;
      }

      .param {
        font-size: 20upx;
        color: #333333;
        line-height: 36upx;
      }

      &:not(:last-child) {
        margin-bottom: 20upx;
      }
    }
  }

  .add-icon {
    width: 56upx;
    height: 56upx;
  }

  .arrow {
    width: 12upx;
    height: 21upx;
  }
}
</style>